<template>
  <div style="width:470px;height:260px;">
    <div class="wrap" style="width: 100%;
  color: rgba(255, 255, 255, 0.3);">
    <div class="top" style="width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 20px;
  padding-bottom: 20px;
  ">
      <img src="../assets/灰色充电桩.png" alt="" style="width:100px;border: 1px dashed #a8b0b7bb;
  margin-left: 13px;
  margin-right: 53px;">
      <div class="top-right" style="display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  font-size: 20px;">
      <div v-for="item in datalist" :key="item.id" style="display: flex;
  justify-content: space-between;
  align-items: center;">
        <div class="title" style="font-size: 14px;
  color: #fff;
  flex: 1;">{{item.title}}</div>
        <div class="data" style="flex: 1.5;">{{item.data}}</div>
      </div></div>
    </div>
    <div class="btm" style="width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  font-size: 14px;">
      <img src="../assets/周边场馆.png" alt="" style="width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-right: 56px;">
      <div class="btm-right" style="flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;">
      <div v-for="item in aroundStadium" :key="item.id" style="margin-right: 50px;">{{item}}</div>
    </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist:[
        {
          title: '充电桩数量',
          data: 35
        },
        {
          title: '充电桩容量',
          data: 8790 + ' kW'
        },
        {
          title: '投运时间',
          data: '2020-08-31'
        },
      ],
      aroundStadium: ['国家体育馆','国家游泳馆','首都体育馆','首都体育场','首都体育馆','首都体育场',]
    }
  },
}
</script>

<style>
/* 
.wrap{
  width: 100%;
  color: rgba(255, 255, 255, 0.3);
}
.top{
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 20px;
  padding-bottom: 20px;
}
.top img {
  border: 1px dashed #a8b0b7bb;
  margin-left: 13px;
  margin-right: 53px;
}
.top-right{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  font-size: 20px;
}
.top-right > div{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-right .title{
  font-size: 14px;
  color: #fff;
  flex: 1;
}
.top-right .data{
  flex: 1.5;
}

.btm{
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  font-size: 14px;
}
.btm img{
  width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-right: 56px;
}
.btm-right{
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.btm-right > div{
  margin-right: 40px;
} */

</style>